<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="贾文清">
    <title>个人项目</title>
    <style>
        body {
            margin: 0;
            width: 100vw;
            height: 100vh;
            background-image: url(./img/3.jpg);
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        main h1 {
            color: hotpink;
            font-size: 40px;
            text-align: center;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul li {
            margin: 15px;
            text-align: center;
            display: block;
            width: 150px;
            height: 50px;
            line-height: 50px;
            background-color: hotpink;
            /* opacity: 0.4; */
            border-radius: 15px;
            /* {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径阴影扩展半径 阴影颜色} */
            box-shadow: 3px 3px 1px white;
        }

        ul li a {
            color: black;
            font-size: 20px;
        }

        .box {
            display: flex;
        }
    </style>
</head>

<body>
    <main>
        <h1>个人项目</h1>
        <div class="box">
            <ul>
                <li><a href="./简易日历.html">简易日历</a> </li>
                <li><a href="./简易选项卡.html">简易选项卡</a> </li>
                <li><a href="./百度新闻/百度新闻.html">百度新闻</a> </li>
                <li><a href="./轮播图/轮播图.html">简易轮播图</a></li>
                <li><a href="./千图网/千图网.html">千图网</a></li>
                <li><a href="./改变图片路径/改变图片路径.html">改变图片路径</a></li>
                <li><a href="./改变透明度/改变透明度.html">改变透明度</a></li>
                <li><a href="./提示框的效果/提示框的效果.html">提示框的效果</a></li>
                <li><a href="./优酷会员/优酷会员.html">优酷会员</a></li>
                <li><a href="./优酷首页/优酷首页.html">优酷首页</a></li>
            </ul>
            <ul>
                <li><a href="./唯品会/唯品会.html">唯品会</a></li>
                <li><a href="./选项卡与下拉菜单/1.选项卡.html">选项卡</a></li>
                <li><a href="./选项卡与下拉菜单/2.下拉菜单.html">下拉菜单</a></li>
                <li><a href="./选择项目与订单/选择项目.html">选择项目</a></li>
                <li><a href="./选择项目与订单/订单.html">订单</a></li>
                <li><a href="./遮罩层/遮罩层.html">jq遮罩层</a></li>
                <li><a href="./遮罩层/jq轮播图.html">jq轮播图</a></li>
                <li><a href="./图片切换/图片切换.html">jq图片切换</a></li>
                <li><a href="./星级评分/星级评分.html">jq星级评分</a></li>
                <li><a href="./星级评分/微博评价.html">jq微博评价</a></li>
            </ul>
            <ul>
                <li><a href="./小米商城/小米.html">小米商城</a></li>
                <li><a href="./轮播图测试/index.html">轮播图测试</a></li>
            </ul>
        </div>
    </main>
</body>

</html>